{% extends "base.html" %}

{% block title %}{{ template.name }} - 底板详情{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('index') }}">首页</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('templates') }}">底板管理</a></li>
                <li class="breadcrumb-item active">{{ template.name }}</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center">
            <h2>
                <i class="bi bi-grid-3x3-gap me-2"></i>{{ template.name }}
            </h2>
            <div class="btn-group">
                <button class="btn btn-outline-primary edit-template" data-template-id="{{ template.id }}">
                    <i class="bi bi-pencil me-1"></i>编辑底板
                </button>
                <a href="{{ url_for('intelligent_positioning') }}?template_id={{ template.id }}" class="btn btn-primary">
                    <i class="bi bi-robot me-1"></i>智能定制
                </a>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- 底板信息 -->
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="bi bi-info-circle me-2"></i>底板信息
                </h5>
            </div>
            <div class="card-body">
                <div class="template-preview mb-4">
                    <div class="preview-container">
                        <div class="preview-canvas" id="templatePreview" 
                             style="aspect-ratio: {{ template.width }}/{{ template.height }};">
                            {% if template.image_path %}
                                <img src="{{ url_for('get_template_image', template_id=template.id) }}" 
                                     alt="{{ template.name }}" 
                                     class="template-background-image"
                                     style="width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.3s;"
                                     onload="console.log('图片加载成功: {{ template.name }}'); this.style.opacity='1';"
                                     onerror="console.error('图片加载失败: {{ template.name }}'); this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                <div class="image-error" style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(240, 240, 240, 0.9); padding: 20px; border-radius: 8px; text-align: center;">
                                    <i class="bi bi-exclamation-triangle text-warning"></i>
                                    <div>图片加载失败</div>
                                    <small>{{ template.image_path }}</small>
                                </div>
                            {% endif %}
                            <canvas id="regionCanvas" class="region-overlay-canvas"></canvas>
                            <div class="canvas-size-overlay">{{ template.width }}×{{ template.height }}</div>
                        </div>
                    </div>
                </div>
                
                <table class="table table-sm">
                    <tbody>
                        <tr>
                            <th>名称</th>
                            <td>{{ template.name }}</td>
                        </tr>
                        <tr>
                            <th>尺寸</th>
                            <td>{{ template.width }} × {{ template.height }} px</td>
                        </tr>
                        <tr>
                            <th>定制区域</th>
                            <td>{{ regions|length }} 个</td>
                        </tr>
                        <tr>
                            <th>创建时间</th>
                            <td>{{ template.created_at.split(' ')[0] if template.created_at else '未知' }}</td>
                        </tr>
                    </tbody>
                </table>
                
                {% if template.description %}
                <div class="mt-3">
                    <h6>描述</h6>
                    <p class="text-muted">{{ template.description }}</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- 定制区域管理 -->
    <div class="col-lg-8">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="bi bi-bounding-box me-2"></i>定制区域
                </h5>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-outline-primary" id="drawRegionBtn">
                        <i class="bi bi-vector-pen me-1"></i>框选区域
                    </button>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#regionModal">
                        <i class="bi bi-plus-circle me-1"></i>手动添加
                    </button>
                </div>
            </div>
            <div class="card-body">
                {% if regions %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>位置</th>
                                    <th>尺寸</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="regionsTable">
                                {% for region in regions %}
                                <tr data-region-id="{{ region.id }}">
                                    <td>
                                        <strong>{{ region.name }}</strong>
                                    </td>
                                    <td>
                                        <small class="text-muted">
                                            X: {{ region.x }}, Y: {{ region.y }}
                                        </small>
                                    </td>
                                    <td>
                                        <small class="text-muted">
                                            {{ region.width }} × {{ region.height }}
                                        </small>
                                    </td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            <button class="btn btn-outline-primary edit-region" 
                                                    data-region-id="{{ region.id }}">
                                                <i class="bi bi-pencil"></i>
                                            </button>
                                            <button class="btn btn-outline-danger delete-region" 
                                                    data-region-id="{{ region.id }}" 
                                                    data-region-name="{{ region.name }}">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="bi bi-bounding-box display-4 text-muted"></i>
                        <h5 class="mt-3 text-muted">还没有定制区域</h5>
                        <p class="text-muted">添加定制区域来定义图片放置的位置</p>
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#regionModal">
                            <i class="bi bi-plus-circle me-1"></i>添加第一个区域
                        </button>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 添加/编辑区域模态框 -->
<div class="modal fade" id="regionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-bounding-box me-2"></i>
                    <span id="regionModalTitle">添加定制区域</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="regionForm">
                <div class="modal-body">
                    <input type="hidden" id="regionId" name="regionId">
                    
                    <div class="mb-3">
                        <label for="regionName" class="form-label">区域名称 *</label>
                        <input type="text" class="form-control" id="regionName" name="name" required>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="regionX" class="form-label">X坐标 *</label>
                                <input type="number" class="form-control" id="regionX" name="x" 
                                       min="0" max="{{ template.width }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="regionY" class="form-label">Y坐标 *</label>
                                <input type="number" class="form-control" id="regionY" name="y" 
                                       min="0" max="{{ template.height }}" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="regionWidth" class="form-label">宽度 *</label>
                                <input type="number" class="form-control" id="regionWidth" name="width" 
                                       min="1" max="{{ template.width }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="regionHeight" class="form-label">高度 *</label>
                                <input type="number" class="form-control" id="regionHeight" name="height" 
                                       min="1" max="{{ template.height }}" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-info">
                        <small>
                            <i class="bi bi-info-circle me-1"></i>
                            底板尺寸: {{ template.width }} × {{ template.height }} px
                        </small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">
                        <span id="regionSubmitText">添加区域</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 编辑底板模态框 -->
<div class="modal fade" id="templateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-pencil me-2"></i>编辑底板
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="templateForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="templateName" class="form-label">底板名称 *</label>
                        <input type="text" class="form-control" id="templateName" name="name" 
                               value="{{ template.name }}" required>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="templateWidth" class="form-label">宽度 (px) *</label>
                                <input type="number" class="form-control" id="templateWidth" name="width" 
                                       value="{{ template.width }}" min="1" max="10000" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="templateHeight" class="form-label">高度 (px) *</label>
                                <input type="number" class="form-control" id="templateHeight" name="height" 
                                       value="{{ template.height }}" min="1" max="10000" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="templateDescription" class="form-label">描述</label>
                        <textarea class="form-control" id="templateDescription" name="description" 
                                  rows="3">{{ template.description or '' }}</textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
.preview-container {
    background: var(--gray-100);
    border-radius: var(--border-radius);
    padding: 1rem;
    position: relative;
}

.preview-canvas {
    background: white;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    overflow: hidden;
    cursor: crosshair;
}

.template-background-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.region-overlay-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.canvas-size-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 3;
}

.region-overlay {
    position: absolute;
    background: rgba(64, 158, 255, 0.2);
    border: 2px solid var(--primary-color);
    border-radius: 2px;
    z-index: 2;
    cursor: pointer;
}

.region-overlay:hover {
    background: rgba(64, 158, 255, 0.3);
    border-color: var(--primary-hover);
}

.region-label {
    position: absolute;
    top: -24px;
    left: 0;
    background: var(--primary-color);
    color: white;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: var(--box-shadow);
}

.drawing-mode {
    cursor: crosshair !important;
}

.drawing-mode .region-overlay {
    pointer-events: none;
}

.selection-box {
    position: absolute;
    border: 2px dashed var(--primary-color);
    background: rgba(64, 158, 255, 0.1);
    z-index: 10;
    pointer-events: none;
}

.region-controls {
    position: absolute;
    top: -30px;
    right: 0;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.region-overlay:hover .region-controls {
    opacity: 1;
}

.region-controls button {
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 10px;
    border-radius: 2px;
}
</style>
{% endblock %}

{% block extra_js %}
<script>
// 底板和区域数据
const templateData = {{ template | tojson | safe }};
const regionsData = {{ regions | tojson | safe }};
</script>
<script src="{{ url_for('static', filename='js/template_detail_new.js') }}"></script>
{% endblock %}
